<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-ruleForm"
    >
      <el-form-item label="活动名称" prop="name" ref="nameRef">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动时间" required>
        <el-col :span="11">
          <el-form-item prop="">
            <el-date-picker
              type="date"
              placeholder="开始时间"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              v-model="ruleForm.date1"
              :picker-options="pickerStartTime(ruleForm.date8,true,true)"
            ></el-date-picker>
            -
            <el-date-picker
              type="date"
              placeholder="结束时间"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              v-model="ruleForm.date8"
              :picker-options="pickerEndTime(ruleForm.date1,true)"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-time-picker
              placeholder="选择时间"
              v-model="ruleForm.date2"
              style="width: 100%"
            ></el-time-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item prop="date3" label="范围时间选择">
        <el-date-picker
          v-model="ruleForm.date3"
          type="datetime"
          format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="date4" label="年月日选择">
        <el-date-picker
          v-date-format
          v-model="ruleForm.date4"
          type="date"
          placeholder="请选择日期时间"
          format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="date7" label="年月日范围选择">
        <el-date-picker
          v-date-format
          v-model="ruleForm.date7"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="date5" label="时分秒选择111">
        <el-time-picker
          v-date-format="{obj:'forms.time'}"
          v-model="ruleForm.date5"
          format="HH:mm"
          value-format="HH:mm"
          placeholder="任意时间点"
          @change="testChange"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item prop="date6" label="时分秒范围选择">
        <el-time-picker
          is-range
          v-date-format
          v-model="ruleForm.date6"
          format="HH:mm"
          value-format="HH:mm"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item label="即时配送" prop="delivery">
        <el-switch v-model="ruleForm.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活动性质" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
          <el-checkbox label="地推活动" name="type"></el-checkbox>
          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源" prop="resource">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="线上品牌商赞助"></el-radio>
          <el-radio label="线下场地免费"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活动形式" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-badge :value="1" class="item">
        <!-- <img src="@/assets/image/a.jpg" alt="" srcset=""> -->
      </el-badge>
      
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="testFunc">活动名称</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import moment from "moment";
import { pickerStartTime, pickerEndTime } from "@/utils/disabledDate"
export default {
  name: "formPage",
  data() {
    let disabledDate = (date) => {
      return (
        date.getTime() > new Date().getTime() ||
        date.getTime() <
          new Date(this.targetTime).getTime() - 24 * 60 * 60 * 1000
      );
    };
    var validateDate6 = (rule, value, callback) => {
      if (value === null) {
        callback(new Error("请选择时间"));
      } else {
        if (
          moment(value[0], "HH:mm").valueOf() >
          moment(value[1], "HH:mm").valueOf()
        ) {
          callback(new Error("开始时间不能大于结束时间"));
        } else {
          callback();
        }
      }
    };
    var validateDate7 = (rule, value, callback) => {
      if (value === null) {
        callback(new Error("请选择时间"));
      } else {
        if (   
          moment(value[0]).format('x') >
          moment(value[1]).format('x')
        ) {
          callback(new Error("开始时间不能大于结束时间"));
        } else {
          callback();
        }
      }
    };
    return {
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        date3: "",
        date4: "1556-10-12",
        date5: "",
        date6: ["", ""],
        date7: "",
        date8: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      time2: '',
      forms: {
        time: ''
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "change" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        date6: [
          {
            type: "date",
            required: true,
            validator: validateDate6,
            trigger: "change",
          },
        ],
        date7: [
          {
            type: "date",
            required: true,
            validator: validateDate7,
            trigger: "change",
          },
        ],

        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
      pickerOptions: {
        disabledDate,
        // selectableRange 用来限制时分秒的选择
        selectableRange: "00:00:00 - 23:59:59",
      },
      targetTime: "2022-07-24 08:00:00", // 目标时间
    };
  },
  watch: {
    "ruleForm.date3"() {
      this.selectable();
    },
  },
  methods: {
    pickerStartTime,
    pickerEndTime,
    testChange(val) {
      this.$forceUpdate()
    },
    // 可选的时间范围(目标时间--当前时间,其余时间不能选)
    selectable() {
      // 当前选中的时间戳
      const date = moment(this.ruleForm.date3).startOf("day").format("x");
      // 当前选中的时间
      const currentDate = moment(this.ruleForm.date3).format("yyyy-MM-DD");
      // 目标时间
      const targetDate = moment(this.targetTime).format("yyyy-MM-DD");
      // 目标时间的时分秒
      const targetDateHms = moment(this.targetTime)
        .format("yyyy-MM-dd HH:mm:ss")
        .substr(11, 9);
      // 当前时间的时间戳
      const nowDate = moment().startOf("day").format("x");
      // 当前时间
      const nowDate2 = moment().format("yyyy-MM-DD");
      // 当前时间的时分秒
      const nowDate3 = moment().format("yyyy-MM-DD HH:mm:ss").substr(11, 9);

      // 如果选择的日期等于targetTime, 时分秒就是targetTime的时分秒到23:59:59
      if (targetDate == currentDate && targetDate != nowDate2) {
        this.pickerOptions.selectableRange = `${targetDateHms} - 23:59:59`;
      }
      // 如果选择的是今天 则需要禁用已经过去的时间节点
      else if (date == nowDate) {
        // 默认选择的最新时间 是当前时间的两分钟后 （留出2分钟的富裕时间）
        this.pickerOptions.selectableRange = `00:00:00 - ${nowDate3}`;
      }
      // 目标时间和当前时间年月日相等
      else if (targetDate == nowDate2) {
        // 默认选择的最新时间 是当前时间的两分钟后 （留出2分钟的富裕时间）
        this.pickerOptions.selectableRange = `${targetDateHms} - ${nowDate3}`;
      }
      // 如果是以后的日期，则不需要禁用时间节点
      else {
        this.pickerOptions.selectableRange = "00:00:00 - 23:59:59";
      }
    },
    testFunc() {
      this.ruleForm.name = "哈哈哈";
    },
    submitForm(formName) {
      console.log(
        "ruleForm.date4",
        this.ruleForm.date4,
        "ruleForm.date5",
        this.ruleForm.date5,
        "this.ruleForm.date6",
        this.ruleForm.date6,
        "this.ruleForm.date7",
        this.ruleForm.date7
      );
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>